<template>
  <div class="note-wrapper wrapper">
    <input type="checkbox" v-model="isCompleted" />
    <span :class="{ completed: isCompleted }">
      {{ formatted }}
      {{ "> " + note.data }}
    </span>
  </div>
</template>

<script >
import { ref, computed, watch } from 'vue'
export default {
  setup (props, { emit }) {
    const isCompleted = ref(false)

    const formatted = computed(() => {
      const d = new Date(props.note.unix)
      const min = d.getMinutes() === 0 ? '00' : d.getMinutes()
      return `${d.getMonth() + 1}/${d.getDate()} ${d.getHours()}:${min}`
    })

    watch(isCompleted, (newValue, oldValue) => {
      emit('remove', {
        status: newValue,
        uuid: props.note.uuid
      })
    })
    return {
      formatted,
      isCompleted
    }
  },

  props: {
    note: Object
  }

}
</script>

<style lang="scss" scoped>
.completed {
  text-decoration: line-through;
}
</style>
